
        <section class="row">
            <div class="col-lg-12">
                <div>
                    <h1>Form</h1>
                </div>
                <div>
                    <ol class="breadcrumb">
                        <li><a href="#"><i class="glyphicon glyphicon-home"></i></a></li>
                        <li>Forms</li>
                        <li class="active">Form Advance</li>
                    </ol>
                </div>
            </div>
        </section>

    <div class="ajax-container">
        <section class="row">
            <div class="col col-lg-12 col-md-12 col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h2 class="panel-title"><i class="glyphicon glyphicon-user"></i> Horizontal</h3>
                    </div>
                    <div class="panel-body form-container">
                        <form class="form-bordered form-horizontal">
                            <fieldset>
                                <legend>Column 1</legend>
                                <ul>
                                    <li class="form-group row">
                                        <label for="photo" class="control-label col-3">Photo</label>
                                        <div class="control-group col-9">
                                            <div class="input-size">
                                                <div class="fileinput fileinput-new" data-provides="fileinput">
                                                    <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                                                        <img src="<?= base_url() ?>resources/images/no_image.gif" data-src="<?= base_url() ?>resources/images/no_image.gif" alt="...">
                                                    </div>
                                                    <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                                                    <div>
                                                        <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input name="photo" id="photo" type="file"></span>
                                                        <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="username" class="control-label col-3">Username</label>
                                        <div class="control-group input-center col-9">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                                    <input name="username" id="username" class="form-control" placeholder="Username" type="text">
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="form-group row">
                                        <label for="email" class="control-label col-3">Email</label>
                                        <div class="control-group input-center col-9">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                                                    <input type="text" name="email" id="email" class="form-control" placeholder="Email">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="no-icon-spinner" class="control-label col-3">
                                            No Icon Spinner<br>
                                            <small class="help-block">.btSpinner()</small>
                                        </label>
                                        <div class="control-group input-center col-9">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                                    <input type="text" name="no-icon-spinner" id="no-icon-spinner" class="form-control" placeholder="0">
                                                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="my-spinner" class="control-label col-3">
                                            My Spinner<br>
                                            <small class="help-block">.btSpinner()</small>
                                        </label>
                                        <div class="control-group input-center col-9">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                                    <input type="text" name="my-spinner" id="my-spinner" class="form-control spinner" placeholder="0">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="spinner" class="control-label col-3">Spinner</label>
                                        <div class="control-group input-center col-9">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <input type="text" name="spinner" id="spinner" class="form-control" placeholder="0">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="spinner1" class="control-label col-3">Spinner</label>
                                        <div class="control-group input-center col-9">
                                            <div class="input-size col-12">
                                                <input type="text" name="spinner1" id="spinner1" class="form-control" placeholder="0">
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="password" class="control-label col-3">Password</label>
                                        <div class="control-group col-9">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                                                    <input type="password" name="password" id="password" class="form-control" placeholder="Password">
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="form-group row">
                                        <label for="time" class="control-label col-3">Time</label>
                                        <div class="control-group col-9">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                                                    <input type="text" name="time" id="time" class="form-control" placeholder="9:45 PM">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="date" class="control-label col-3">Date</label>
                                        <div class="control-group col-9">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                    <input type="text" name="date" id="date" class="form-control" placeholder="06/03/2014">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="datetimepicker" class="control-label col-3">Datetime</label>
                                        <div class="control-group col-9">
                                            <div class="input-size col-12">
                                                <div class="input-group date">
                                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                    <input type="text" name="datetimepicker" id="datetimepicker" class="form-control" placeholder="03/14/2014" value="03/14/2014">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="date-time" class="control-label col-3">
                                            Datetime<br>
                                            <small class="help-block">(Date Range as Datetime)</small>
                                        </label>
                                        <div class="control-group col-9">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                    <input type="text" name="date-time" id="date-time" class="form-control" placeholder="03/14/2014" value="03/14/2014">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="date-range" class="control-label col-3">Date Range</label>
                                        <div class="control-group col-9">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                    <input type="text" name="date-range" id="date-range" class="form-control" placeholder="03/14/1989 - 03/14/2014" value="04/14/1989 - 03/14/2014">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="date-time-range" class="control-label col-3">Datetime Range</label>
                                        <div class="control-group col-9">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                    <input type="text" name="date-time-range" id="date-time-range" class="form-control" placeholder="03/14/1989 07:15 AM - 03/14/2014 08:30 PM" value="03/14/1989 07:15 AM - 03/14/2014 08:30 PM">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="color" class="control-label col-3">Color</label>
                                        <div class="control-group col-9">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-tint"></i></span>
                                                    <input type="text" name="color" id="color" class="form-control" placeholder="#ffffff">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="switch" class="control-label col-3">Switch</label>
                                        <div class="control-group col-9">
                                            <div class="input-size col-12">
                                                <div class="input-group">
                                                    <input type="checkbox" name="switch" id="switch" class="form-control switch">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="tags-input" class="control-label col-3">Tags Input</label>
                                        <div class="control-group col-9">
                                            <div class="input-size col-12">
                                                <input type="text" name="tags-input" id="tags-input" class="form-control" placeholder="Tags">
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="button-upload" class="control-label col-3">Button Upload</label>
                                        <div class="control-group col-9">
                                            <div class="input-size">
                                                <div class="fileinput fileinput-new" data-provides="fileinput">
                                                    <span class="btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" name="button-upload" id="button-upload"></span>
                                                    <span class="fileinput-filename"></span>
                                                    <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="file-upload" class="control-label col-3">File Upload</label>
                                        <div class="control-group col-9">
                                            <div class="input-size">
                                                <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                                                    <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
                                                    <span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" name="file-upload" id="file-upload"></span>
                                                    <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="address" class="control-label col-3">Address</label>
                                        <div class="control-group col-9">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-home"></i></span>
                                                    <input name="address" id="address" class="form-control" placeholder="Address" type="text">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="gender" class="control-label col-3">Gender</label>
                                        <div class="control-group col-9">
                                            <div class="input-size">
                                                <div class="radio">
                                                    <label class="control-label"><input name="gender" value="Male" checked="" type="radio">Male</label>
                                                </div>
                                                <div class="radio">
                                                    <label class="control-label"><input name="gender" value="Female" type="radio">Female</label>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="birthdate" class="control-label col-3">Birth Date</label>
                                        <div class="control-group col-9">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                                    <input name="birthdate" id="birthdate" class="form-control" placeholder="Birth Date" type="text">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="mobile" class="control-label col-3">Mobile</label>
                                        <div class="control-group col-9">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-mobile"></i></span>
                                                    <input name="mobile" id="mobile" class="form-control" placeholder="Mobile" type="text">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="country" class="control-label col-3">Country</label>
                                        <div class="control-group col-9">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                                    <select name="country" id="country" class="form-control">
                                                        <option value="PH">Philippines</option>
                                                        <option value="US">United States</option>
                                                        <option value="PH">Pakistan</option>
                                                        <option value="US">Vietnam</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="country2" class="control-label col-3">Country</label>
                                        <div class="control-group col-9">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                                    <select name="country" id="country2" class="form-control" multiple>
                                                        <option value="PH">Philippines</option>
                                                        <option value="US">United States</option>
                                                        <option value="PH">Pakistan</option>
                                                        <option value="US">Vietnam</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="country-image1" class="control-label col-3">Country</label>
                                        <div class="control-group col-9">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                                    <select name="country-image1" id="country-image1" class="form-control">
                                                        <option value="PH" data-img-src=" <?= base_url() ?>resources/images/cartoons/grim/1.jpg">Philippines</option>
                                                        <option value="US" data-img-src=" <?= base_url() ?>resources/images/cartoons/grim/2.png">United States</option>
                                                        <option value="PH" data-img-src=" <?= base_url() ?>resources/images/cartoons/grim/3.png">Pakistan</option>
                                                        <option value="US" data-img-src=" <?= base_url() ?>resources/images/cartoons/grim/2.png">Vietnam</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="country-image" class="control-label col-3">Country</label>
                                        <div class="control-group col-9">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-globe"></i></span>
                                                    <select name="country-image" id="country-image" class="form-control" multiple="multiple">
                                                        <option value="PH" data-img-src=" <?= base_url() ?>resources/images/cartoons/grim/1.jpg">Philippines</option>
                                                        <option value="US" data-img-src=" <?= base_url() ?>resources/images/cartoons/grim/2.png">United States</option>
                                                        <option value="PH" data-img-src=" <?= base_url() ?>resources/images/cartoons/grim/3.png">Pakistan</option>
                                                        <option value="US" data-img-src=" <?= base_url() ?>resources/images/cartoons/grim/2.png">Vietnam</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="about" class="control-label col-3">About</label>
                                        <div class="control-group col-9">
                                            <div class="input-size">
                                                <textarea name="about" id="vertical-about" class="form-control"></textarea>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="cleditor" class="control-label col-3">WYSIWYG - CLEditor</label>
                                        <div class="control-group col-9">
                                            <div class="input-size">
                                                <textarea name="cleditor" id="cleditor" class="form-control"></textarea>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="wysiwyg" class="control-label col-3">WYSIWYG - CKEditor</label>
                                        <div class="control-group col-9">
                                            <div class="input-size">
                                                <textarea name="wysiwyg" id="wysiwyg" class="form-control"></textarea>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="multiple-upload" class="control-label col-3">Multiple Upload</label>
                                        <div class="control-group col-9">
                                            <div class="input-size">
                                                <div id="multiple_upload" class="plupload">
                                                    No Flash
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="multiple-upload" class="control-label col-3">
                                            Captcha Image
                                            <br><small>(Click to Refresh)</small>
                                        </label>
                                        <div class="control-group col-9">
                                            <div class="input-size">
                                                <div id="captcha-image"><?= $captcha_image ?></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="form-group row">
                                        <label for="captcha" class="control-label col-3">
                                            Captcha *
                                        </label>
                                        <div class="control-group col-9">
                                            <div class="input-size">
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="fa fa-camera"></i></span>
                                                    <input type="text" name="captcha" id="captcha" class="form-control" placeholder="Type Image Above">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </fieldset>
                            <div class="submit-group col-12 align-right">
                                <input name="submit" class="btn btn-primary" value="Submit" type="submit">
                                <input name="cancel" class="btn btn-default" value="Cancel" type="button">
                            </div>
                        </form>
                        
                    </div>
                </div>
            </div>
        </section>
        <!-- page-script -->
        <script type="text/javascript" src="<?= base_url() ?>js/scripts/form-advance.js"></script>
    </div>